//
//  ContentView.swift
//  EditingGrids
//
//  Created by Alfred Jobs on 2022/12/12.
//

import SwiftUI

struct SymbolGrid: View {
    @State private var isEditing = false
    @State private var isAddingSymbol = false
    @State private var selectedSymbol: Symbol?
    
    private var gridColumns = Array(repeating: GridItem(), count: 3)
    
    @State private var symbols = [
        Symbol(name: "tshirt"),
        Symbol(name: "eyes"),
        Symbol(name: "eyebrow"),
        Symbol(name: "nose"),
        Symbol(name: "mustache"),
        Symbol(name: "mouth"),
        Symbol(name: "eyeglasses"),
        Symbol(name: "facemask"),
        Symbol(name: "brain.head.profile"),
        Symbol(name: "brain"),
        Symbol(name: "icloud"),
        Symbol(name: "theatermasks.fill"),
    ]
    
    var body: some View {
        NavigationStack {
            VStack {
                ScrollView {
                    LazyVGrid(columns: gridColumns) {
                        ForEach(symbols) { symbol in
                        ZStack(alignment: .topTrailing) {
                            Image(systemName: symbol.name)
                                .resizable()
                                .scaledToFit()
                                .symbolRenderingMode(.hierarchical)
                                .foregroundColor(.accentColor)
                                .ignoresSafeArea(.container, edges: .bottom)
                                .cornerRadius(8)
                            if isEditing {
                                Button {
                                    guard let index = symbols.firstIndex(of: symbol) else { return }
                                    withAnimation {
                                        _ = symbols.remove(at: index)
                                    }
                                } label: {
                                    Image(systemName: "xmark.square.fill")
                                        .font(.title)
                                        .symbolRenderingMode(.palette)
                                        .foregroundStyle(.white, .red)
                                }
                                .offset(x: 7, y: -7)
                            }
                        }
                            .padding()
                        }
                        .buttonStyle(.plain)
                    }
                }
            }
            .navigationTitle("My Symbols")
            .navigationBarTitleDisplayMode(.inline)
            .sheet(isPresented: $isAddingSymbol, onDismiss: addSymbol) {
                SymbolPicker(symbol: $selectedSymbol)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(isEditing ? "Done" : "Edit") {
                        withAnimation { isEditing.toggle() }
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        isAddingSymbol = true
                    } label: {
                        Image(systemName: "plus")
                    }
                    .disabled(isEditing)
                }
        }
        }
    }
    
    func addSymbol() {
        guard let name = selectedSymbol else { return }
        withAnimation {
            symbols.insert(name, at: 0)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        SymbolGrid()
    }
}
